<script setup>
import { onMounted, ref,reactive } from 'vue'
import useUserStore from '@/store/user';
import {get_time} from '@/utils/time'

let userStore = useUserStore()  // 使用 @/store/user 里的仓库数据

let noticeArr = ref([])  // 用来保存学校公告列表
let dialogTableVisible = ref(false)  // 控制 查看详情页 的显示与隐藏
let noticeDetail = reactive({  // 保存当前要显示的公告详情
    pubdate:'',
    title:'',
    content:''
})

noticeArr.value = [
    {pubdate:'2023-10-10',title:'放假通知',author:'教务处',content:'通知：10月20日-10月23日，放假3天，请各位师生做好自己的安排'},
    {pubdate:'2023-10-12',title:'考试通知',author:'学校',content:'通知：11月20日-11月25日，是学校期末考试时间，请各位师生提前做好考前准备，争取拿到一个好成绩，考出风格，考出水平'}
]

const showDetail = (row) => {
    dialogTableVisible.value = true
    Object.assign(noticeDetail,row)
}

</script>

<template>
    <div>
        <el-card>
            <div class="box">
                <img src="/public/avatar/default.png" alt="" class="avatar">
                <div class="bottom">
                    <h3 class="title">{{ get_time()}}好 <span>{{ userStore.username }}</span></h3>
                    <p class="subtitle">学籍管理系统</p>
                </div>
            </div>
            
        </el-card>
        <el-card style="margin: 10px 0;">
            <p style="margin: 10px 0;">学校公告</p>
            <el-table border :data="noticeArr">
                <el-table-column type="index" label="序号" width="80px"></el-table-column>
                <el-table-column label="时间" prop="pubdate" width="200px"></el-table-column>
                <el-table-column label="标题" prop="title"  width="200px"></el-table-column>
                <el-table-column label="作者" prop="author"  width="200px"></el-table-column>
                <el-table-column label="内容" prop="content" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作"  width="200px">
                    <template #="{row,$index}">
                        <el-button type="primary" size="small" @click="showDetail(row)">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog v-model="dialogTableVisible" title="公告详情" width="70%">
                <div style="border: 1px solid black;padding: 10px;">
                    <el-row justify="center" ><p style="font-size: 24px;font-weight: bolder;">{{ noticeDetail.title }}</p></el-row>
                    <el-row style="margin:20px 0px;">
                        <el-col :span="24"><p style="font-size: 18px;text-indent:4ch;line-height:3ch">{{ noticeDetail.content }}</p></el-col>
                    </el-row>
                    <el-row justify="space-between">
                        <el-col :span="8"><p style="font-size: 16px;">发布时间：{{ noticeDetail.pubdate }}</p></el-col>
                        <el-col :span="8"><p style="font-size: 16px;float: right;">作者：{{ noticeDetail.author }}</p></el-col>
                    </el-row>
                </div>
            </el-dialog>
        </el-card>
    </div>
</template>

<style scoped lang="scss">
.box{
    display: flex;
    .avatar{
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
    .bottom{
        margin-left: 20px;
    }
    .title{
        font-size: 24px;
        font-weight: bolder;
        margin-bottom: 30px;
    }
    .subtitle{
        font-style: italic;
        color:darkgrey;
    }
}
.bg{
    height: 500px;
    overflow: hidden;
}
</style>